<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" @open="onOpen()" mode="bottom" :safeAreaInsetBottom="false" bgColor="#232323">
			<view class="select-wrap">
				<view class="title-line" v-if="title">
					<text>{{title}}</text>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="list">
						<view class="item" v-for="(item,index) in list" :key="index" @click="chooseItem(item)">
							<text class="label u-line-1">{{item.label}}</text>
						</view>
					</view>
				</scroll-view>
				<u-gap height="20rpx" bgColor="#020811"></u-gap>
				<view class="cancel-btn" @click="popuo_show = false">
					<!-- 取消 -->
					<text>取消</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				popuo_show: false
			};
		},
		methods: {
			show() {
				this.popuo_show = true;
			},
			// 选中列表项
			chooseItem(item) {
				this.$emit("confirm", item);
				this.popuo_show = false;
			},
			onClose() {
				this.popuo_show = false;
				this.$emit("close");
			},
			onOpen() {
				console.log("popup-open");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-wrap {
		display: flex;
		flex-direction: column;

		.title-line {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			font-size: 36rpx;
			color: #000000;
			font-weight: bold;
		}

		.scroll-Y {
			max-height: 60vh;
		}

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 10rpx;
			padding: 0 50rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				width: 100%;
				border-bottom: 1px solid #121212;

				.label {
					font-size: 30rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}

			.item:last-child {
				border-bottom: none;
			}
		}

		.cancel-btn {
			background-color: #232323;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			border-radius: 10rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容 iOS >= 11.2 */
			box-sizing: content-box;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 100rpx;

		}
	}
</style>